<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>抽奖</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="renderer" content="webkit">
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<style>
		.g-content {
			width: 100%;
			background: #fbe3cc;
			height: auto;
			font-family: "微软雅黑", "microsoft yahei";
		}

		.g-content .g-lottery-case {
			width: 500px;
			height: 445px;
			margin: 0 auto;
			overflow: hidden;
		}

		.g-content .g-lottery-case .g-left h2 {
			font-size: 20px;
			line-height: 32px;
			font-weight: normal;
			margin-left: 20px;
		}

		.g-content .g-lottery-case .g-left {
			width: 450px;
			float: left;
		}

		.g-lottery-box {
			width: 400px;
			height: 400px;
			margin-left: 30px;
			position: relative;
			background: url(img/ly-plate-c.gif) no-repeat;
		}

		.g-lottery-box .g-lottery-img {
			width: 340px;
			height: 340px;
			position: relative;
			background: url(img/bg-lottery.png) no-repeat;
			left: 30px;
			top: 30px;
		}

		.g-lottery-box .playbtn {
			width: 186px;
			height: 186px;
			position: absolute;
			top: 77px;
			left: 77px;
			background: url(img/playbtn.png) no-repeat;
		}
	</style>
</head>

<body>
	<div class="g-content">
		<div class="g-lottery-case">
			<div class="g-left">
				<h2>您已拥有<span class="playnum"></span>次抽奖机会，点击立刻抽奖！~</h2>
				<div class="g-lottery-box">
					<div class="g-lottery-img">
						<a class="playbtn" href="javascript:;" title="开始抽奖"></a>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/jquery.rotate.min.js"></script>
	<script>
		$(function () {
			var $btn = $('.playbtn');
			var playnum = 1; //初始次数，由后台传入
			$('.playnum').html(playnum);
			var isture = 0;
			var clickfunc = function () {
				var data = [1, 2, 3, 4, 5, 6];
				//data为随机出来的结果，根据概率后的结果
				data = data[Math.floor(Math.random() * data.length)];
				switch (data) {
					case 1:
						rotateFunc(1, 0, '恭喜您获得2000元理财金!');
						break;
					case 2:
						rotateFunc(2, 60, '谢谢参与~再来一次吧~');
						break;
					case 3:
						rotateFunc(3, 120, '恭喜您获得5200元理财金!');
						break;
					case 4:
						rotateFunc(4, 180, '恭喜您获得100元京东E卡，将在次日以短信形式下发到您的手机上，请注意查收!');
						break;
					case 5:
						rotateFunc(5, 240, '谢谢参与~再来一次吧~');
						break;
					case 6:
						rotateFunc(6, 300, '恭喜您获得1000元理财金!');
						break;
				}
			}
			$btn.click(function () {
				if (isture) return; // 如果在执行就退出
				isture = true; // 标志为 在执行
				//先判断是否登录,未登录则执行下面的函数
				if (1 == 2) {
					$('.playnum').html('0');
					alert("请先登录");
					isture = false;
				} else { //登录了就执行下面
					if (playnum <= 0) { //当抽奖次数为0的时候执行
						alert("没有次数了");
						$('.playnum').html(0);
						isture = false;
					} else { //还有次数就执行
						playnum = playnum - 1; //执行转盘了则次数减1
						if (playnum <= 0) {
							playnum = 0;
						}
						$('.playnum').html(playnum);
						clickfunc();
					}
				}
			});
			var rotateFunc = function (awards, angle, text) {
				isture = true;
				$btn.stopRotate();
				$btn.rotate({
					angle: 0,
					duration: 4000, //旋转时间
					animateTo: angle + 1440, //让它根据得出来的结果加上1440度旋转
					callback: function () {
						isture = false; // 标志为 执行完毕
						alert(text);
					}
				});
			};
		});
	</script>
</body>

</html>